<template>
  <el-header>
<!--    <el-breadcrumb separator="/">-->
<!--      <el-breadcrumb-item @click="handleEditProfile">个人中心</el-breadcrumb-item>-->
<!--      <el-breadcrumb-item v-if="isEditing">编辑个人资料</el-breadcrumb-item>-->
<!--    </el-breadcrumb>-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
          :style="isEditing ? {} : { 'pointer-events': 'none', 'color': 'inherit' }"
          @click="handleEditProfile"
      >
        个人中心
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="isEditing">编辑个人资料</el-breadcrumb-item>
    </el-breadcrumb>

  </el-header>
  <el-card class="profile-card"  :style="{ height: cardMaxHeight }">
<!--    <el-card class="profile-card" :style="{ height: cardMaxHeight }" >-->
    <!-- 封面 container 限高 -->
    <div class="cover-container">
      <img :src="coverUrl" class="user-cover" />
      <!-- 取消drag-->
      <el-upload
          action="#"
          :show-file-list="false"
          :before-upload="handleCoverUpload"
      >
        <el-button type="primary" class="upload_btn">
              <span style="display: inline-flex; align-items: center;">
                <el-icon><Camera /></el-icon>
                上传封面图片
              </span>
        </el-button>
      </el-upload>
    </div>

    <!-- 移除封面图片按钮 -->
    <!--      <el-button v-if="coverUrl !== defaultCoverUrl" type="primary" @click="removeCover">移除封面</el-button>-->

    <!-- 头像 -->
    <div class="avatar-container" >
      <img src="../assets/avatar.jpg" class="user-avatar" style="border-radius: 0;" @mouseover="showOverlay = true" @mouseleave="showOverlay = false" @click="handleUploadClick" />
      <div v-if="showOverlay" class="overlay" @click="handleUploadClick">
        <el-icon><Camera/></el-icon>
        <div class="text">修改我的头像</div>
      </div>
      <input type="file" accept="image/*" ref="fileInput" style="display: none" @change="handleFileChange" />
    </div>
    <!--个人资料-->
    <div class="profile-info" v-if="!isEditing">
      <div class="detail-item">
        <span class="label"><strong>用户名:</strong></span>
        <span class="value">{{ userName }}</span>
      </div>
      <div class="detail-item">
        <span class="label"><strong>账号:</strong></span>
        <span class="value">{{ Account }}</span>
      </div>
      <div class="detail-item">
        <span class="label"><strong>性别:</strong></span>
        <span class="value">{{ detail.Gender === 0 ? '女' : detail.Gender === 1 ? '男' : '这个人很神秘' }}</span>
      </div>

      <el-collapse-transition>
        <div v-show="isDetailVisible">
          <div v-show="active1" class="detail-item">
            <span class="label"><strong>个人简介:</strong></span>
            <span class="value">{{ detail.Intro }}</span>
          </div>
          <div v-show="active2" class="detail-item">
            <span class="label"><strong>校区:</strong></span>
            <span class="value">{{ detail.Campus }}</span>
          </div>
          <div v-show="active3" class="detail-item">
            <span class="label"><strong>手机号:</strong></span>
            <span class="value">{{ detail.Phone }}</span>
          </div>
          <div v-show="active4" class="detail-item">
            <span class="label"><strong>邮箱:</strong></span>
            <span class="value"><a href="mailto:{{ detail.Email }}">{{ detail.Email }}</a></span>
          </div>
          <div v-show="active5" class="detail-item">
            <span class="label"><strong>备用邮箱:</strong></span>
            <span class="value"><a href="mailto:{{ detail.BackupEmail }}">{{ detail.BackupEmail }}</a></span>
          </div>
          <div v-show="active6" class="detail-item">
            <h3>荣誉经历</h3>
            <ul>
              <li v-for="honor in detail.Honors" :key="honor.HonorID">
                {{ honor.Title }} - {{ formatDate(honor.StartTime) }}
              </li>
            </ul>
          </div>
        </div>
      </el-collapse-transition>

      <el-button @click="toggleDetail" style="border:none" class="detail_btn">
        <el-icon><component :is="!isDetailVisible ? 'ArrowDown' : 'ArrowUp'" @click="toggleDetail" /></el-icon>
        {{ !isDetailVisible ? '查看详细资料' : '收起详细资料' }}
      </el-button>
    </div>


    <div class="profile-edit" v-if="isEditing">
      <el-form  :model="detail" :rules="rules"  label-position="right" label-width="80px">
        <el-form-item  label="性别" style="width: 280px;">
          <el-select v-model="detail.Gender"  >
            <el-option label="女" :value="0"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="这个人很神秘" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人简介" style="width: 280px;">
          <el-input v-model="detail.Intro"></el-input>
        </el-form-item>
        <el-form-item label="校区" placeholder={{detail.Campus}} style="width: 280px;">
          <el-select v-model="detail.Campus">
            <el-option label="南校区" value="南校区"></el-option>
            <el-option label="珠海校区" value="珠海校区"></el-option>
            <el-option label="深圳校区" value="深圳校区"></el-option>
            <el-option label="北校区" value="北校区"></el-option>
            <el-option label="东校区" value="东校区"></el-option>
            <el-option label="这个人很神秘" value="这个人很神秘"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" style="width: 280px;">
          <el-input v-model="detail.Phone"></el-input>
        </el-form-item>
        <el-form-item prop='Email' label="邮箱"  style="width: 280px;">
          <el-input v-model="detail.Email"></el-input>
        </el-form-item>
        <el-form-item prop='BackupEmail' label="备用邮箱" style="width: 280px;">
          <el-input v-model=detail.BackupEmail></el-input>
        </el-form-item>
        <el-form-item label="荣誉经历">
          <div style="display: flex;flex-direction: column; justify-content:flex-start; align-items: flex-start;">
            <el-button v-if="isEditingHonor == null" @click="addHonor" plain style="border:none">
              <el-icon style="color:#1772F6;font-size: 20px"><CirclePlus/></el-icon>
              <span style="color:#1772F6;font-size: 14px">添加教育经历</span>
            </el-button>
            <div v-if="isEditingHonor !== null"  style="display: flex;justify-content:flex-start;align-items: center;margin-top: 10px;">
              <el-input v-model="honorTitle" placeholder="荣誉标题" style=" margin-right: 10px;"></el-input>
              <el-date-picker
                  v-model="honorTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="date" placeholder="选择日期"
                  :disabled-date="disabledFutureDates"></el-date-picker>
              <el-button plain @click="saveHonor" style="margin-left: 20px;color:#1772F6;">保存</el-button>
              <el-button plain @click="cancelEditHonor" style="margin-left: 10px;">取消</el-button>
            </div>
            <ul style="display: flex;flex-direction: column; justify-content:center; align-items: flex-start;list-style: none; padding: 0; margin-top: 15px;">
              <li v-for="(honor, index) in detail.Honors" :key="honor.HonorID" style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px;">
                <span>{{ honor.Title }} - {{ formatDate(honor.StartTime)}}</span>
                <div>
                  <el-icon @click="deleteHonor(honor.HonorID, index)" style="margin-left: 8px; color:#1772F6; font-size: 20px; cursor: pointer;"><Delete /></el-icon>
                </div>
              </li>
            </ul>
          </div>
        </el-form-item>
      </el-form>
      <div style="display: flex; align-items: center;margin-left: 200px">
        <el-button type="primary" @click="saveProfile">保存</el-button>
        <el-button @click="handleEditProfile">返回个人主页</el-button>
      </div>
    </div>


    <el-button v-if="!isEditing" class="edit_btn" @click="handleEditProfile">编辑个人资料</el-button>
  </el-card>

  <el-tabs v-if="!isEditing" v-model="activeTab" class="func_tabs" type="border-card">
    <el-tab-pane label="我的收藏" name="收藏"  >
      <el-tabs v-model="activeSubTab" @tab-click="handleTabClick" >
        <el-tab-pane label="收藏的社团" name="收藏的社团" >
          <div v-if="displayedClubs.length>0">
            <div>
              <el-row gutter="6" style=" margin-left: 60px;margin-top: 10px">
                <el-col :span="12" v-for="(club,index) in displayedClubs" :key="index">
                  <el-card shadow="hover" :body-style="{ padding: '0px' }" class="clubInfo" style="height: 320px; width: 350px;margin-bottom: 20px;">
                    <div style="height: 100px;width: 340px; display: inline-block; position: relative; cursor: pointer;">
                      <img src="../assets/111.jpg" class="image" style="width: 100%; height: auto; object-fit: contain;">
                      <div @click="toggleClubCollect(club.Cid,index)">
                        <el-icon v-if="Ccollected[index] === 1" :style="'color: #f9d423; font-size: 24px; position: absolute; top: 18px; right: 9px;'">
                          <StarFilled />
                        </el-icon>
                        <el-icon v-else :style="'color:#CCD8FFFF; font-size: 24px; position: absolute; top: 18px; right: 9px;'">
                          <Star />
                        </el-icon>
                      </div>
                    </div>

                    <div style="margin-top:2px; font-family: Arial; font-size: 24px;font-weight:600;">
                      <span>{{club.Cname}}</span>
                    </div>

                    <div style="margin-top:7px;">
                      <el-tag effect="dark" size='large' type="danger" style="opacity: 0.7; font-size: 14px; padding:  3px 10px;height:24px;">{{ getUnitText(club.Unit) }}</el-tag>
                      <el-tag effect="dark" size='large' type="success" style=" margin-left: 10px; opacity: 0.7; font-size: 14px; padding: 3px 14px;height:24px;">{{ getTypeText(club.Type) }}</el-tag>
                      <el-tag effect="dark" size='large' style="opacity: 0.7; margin-left: 10px; font-size: 14px; padding: 3px 10px;height:24px;">{{ getAddressText(club.Address)}}</el-tag>
                    </div>

                    <div style="text-align: left; margin-left:12px; margin-top:12px; font-family: Arial; font-size: 16px;width: 340px; height: 45px;
                    display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; ">
                      <span> <strong><span style="font-size: 16px;">社团简介：</span></strong> {{club.Introduction}}</span>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div class="pagination">
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="collectedClubs.length"
                  :page-size="pageCollectedClubSize"
                  :current-page="CcurrentPage"
                  @current-change="handleCollectedClubsPage">
              </el-pagination>
            </div>
          </div>
          <div v-else style="text-align: center; margin-top: 50px;">
            <p>暂无活动记录</p>
          </div>
        </el-tab-pane>

        <el-tab-pane label="收藏的活动" name="收藏的活动" >
          <div v-if="displayedActivities.length > 0">
            <div style="display: flex;flex-direction: column;margin-top:20px">
              <el-row >
                <el-col :span="24" v-for="(activity,index) in displayedActivities" :key="index">
                  <el-card shadow="hover" :body-style="{ padding: '0px' }" style="height: 200px;width: 770px;margin-bottom: 20px;margin-top:02px; margin-left:80px; padding: 10px;">
                    <el-row>
                      <el-col :span="3"><img :src="getTypeLogo(activity.Type)"  style="width: 40px; height:40px; margin-right: 12px; margin-top: 2px"></el-col>

                      <el-col :span="16">
                        <div style="margin-top: 2px;height: 22px; width: 500px;">
                          <p style="font-size: 22px; font-family: Arial;  float: left; font-weight: 600;  margin: 0 0 0px; text-align: left;
                                        display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1; overflow: hidden;text-overflow: ellipsis;">{{activity.ATitle}}</p>
                        </div>
                      </el-col>

                      <el-col :span="4">
                        <el-tag style="font-size: 14px; padding: 12px 22px;margin-top:7px; margin-left: 18px;">{{getStateText(activity.State)}}</el-tag>
                      </el-col>

                      <el-col :span="1">
                        <div @click="toggleCollect(activity.Aid,index)">
                          <el-icon v-if="collected[index] === 1" :style="'color: #f9d423; font-size: 24px; position: absolute; top: 7px; right: 11px;'">
                            <StarFilled />
                          </el-icon>
                          <el-icon v-else :style="'color:#CCD8FFFF; font-size: 24px; position: absolute; top: 7px; right: 11;'">
                            <Star />
                          </el-icon>
                        </div>
                      </el-col>
                    </el-row>

                    <div style="margin-top:-2px;margin-left:95px; height:25px;width: 400px;text-align: left">
                      <el-tag effect="dark" size='large' type="success" style="opacity: 0.7; font-size: 14px; padding: 4px 10px;height:22px;">{{getCampusText(activity.Campus)}}</el-tag>
                      <el-tag effect="dark" size='large' type="warning" style="opacity: 0.7; margin-left: 12px;font-size: 14px; padding: 4px 10px;height:22px;">{{getTypeText(activity.Type)}}</el-tag>
                      <el-tag v-if="getPermissionText(activity.Permission)" effect="dark" size="large" type="danger"
                              style="opacity: 0.7; margin-left: 12px; font-size: 14px; padding: 4px 14px;height:22px;">{{ getPermissionText(activity.Permission) }}
                      </el-tag>
                    </div>

                    <div style="text-align: left; margin-left:95px; margin-top:-2px; font-family: Arial; font-size: 14px;width: 600px; height: 100px;">
                      <p style="font-size: 14px; height:15px"><strong><span style="font-size: 15px;">举办社团：</span></strong> {{clubs[index]}}</p>
                      <p style="font-size: 14px; height:15px"><strong><span style="font-size: 15px;">举办地点：</span></strong> {{activity.Place}}</p>
                      <p style="font-size: 14px; height:15px"><strong><span style="font-size: 15px;">报名时间：</span></strong> {{getFormatTime(activity.StartTime)}} - {{getFormatTime(activity.EndTime)}}</p>
                      <p style="font-size: 14px; height:15px"><strong><span style="font-size: 15px;">举办时间：</span></strong> {{getFormatTime(activity.Stime)}} - {{getFormatTime(activity.Etime)}}</p>
                    </div>

                    <div>
                      <el-button type="success" style="opacity: 0.95; margin-top: -80px; margin-left:600px; height:26px; width: 110px;font-size: 16px;" @click="showDialog(activity)">查看详情</el-button>
                      <el-dialog v-model="dialogVisible" width=800px :modal="false" :before-close="handleClose" >
                        <div style="text-align: left; margin-left:60px; margin-top: -40px; font-family: Arial; width:630px;">
                          <p style="font-size: 26px;font-weight: 600;" v-html="CurrentTitle"></p>
                          <span style="font-size:20px;font-weight: 550;">活动内容：</span>
                          <p style="font-size: 18px;" v-html="formattedContent"> </p>
                          <span style="font-size: 20px;font-weight: 550;">报名要求：</span>
                          <p style="font-size: 18px;" v-html="formattedRequirement"></p>
                        </div>
                        <div style="margin-top: 40px; display: flex;  justify-content: center;">
                                    <span>
                                      <el-button @click="dialogVisible = false">取消</el-button>
                                      <el-button type="primary" @click="joinActivity()">报名</el-button>
                                    </span>
                        </div>
                      </el-dialog>
                      <div v-if="dialogVisible" class="overlay"></div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <div class="pagination">
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="collectedActivities.length"
                  :page-size="pageCollectedActivitySize"
                  :current-page="AcurrentPage"
                  @current-change="handleCollectedActivityPage">
              </el-pagination>
            </div>
          </div>
          <div v-else style="text-align: center; margin-top: 50px;">
            <p>暂无收藏的活动</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="我的社团" name="社团">
      <div v-if="displayedJoinedClubs.length>0">
        <el-tabs v-model="activeSubTab" >
          <div>
            <el-row gutter="6" style=" margin-left: 60px;margin-top: 10px">
              <el-col :span="12" v-for="(joinedclub,index) in displayedJoinedClubs" :key="index">
                <el-card shadow="hover" :body-style="{ padding: '0px' }" class="clubInfo" style="height: 320px; width: 350px;margin-bottom: 25px;">
                  <div style="height: 100px;width: 340px; display: inline-block; position: relative; cursor: pointer;">
                    <img src="../assets/111.jpg" class="image" style="width: 100%; height: auto; object-fit: contain;">
                  </div>

                  <div style="margin-top:2px; font-family: Arial; font-size: 24px;font-weight:600;">
                    <span>{{joinedclub.Cname}}</span>
                  </div>

                  <div style="margin-top:7px;">
                    <el-tag effect="dark" size='large' type="danger" style="opacity: 0.7; font-size: 14px; padding:  3px 10px;height:24px;">{{ getUnitText(joinedclub.Unit) }}</el-tag>
                    <el-tag effect="dark" size='large' type="success" style=" margin-left: 10px; opacity: 0.7; font-size: 14px; padding: 3px 14px;height:24px;">{{ getTypeText(joinedclub.Type) }}</el-tag>
                    <el-tag effect="dark" size='large' style="opacity: 0.7; margin-left: 10px; font-size: 14px; padding: 3px 10px;height:24px;">{{ getAddressText(joinedclub.Address)}}</el-tag>
                  </div>

                  <div style="text-align: left; margin-left:12px; margin-top:12px; font-family: Arial; font-size: 16px;width: 340px; height: 45px;
                    display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; ">
                    <span> <strong><span style="font-size: 16px;">社团简介：</span></strong> {{joinedclub.Introduction}}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="joinedClubs.length"
                :page-size="pageJoinedClubSize"
                :current-page="JcurrentPage"
                @current-change="handleJoinedClubsPage">
            </el-pagination>
          </div>
        </el-tabs>
      </div>
      <div v-else style="text-align: center; margin-top: 50px;">
        <p>暂无加入的社团</p>
      </div>
    </el-tab-pane>
    <el-tab-pane label="活动记录" name="活动记录">
      <div v-if="paginatedActivies.length>0">
        <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
          <el-select v-model="activityState" placeholder="请选择" style="width: 100px; margin-right: 10px;">
            <el-option label="全部状态" :value="null"></el-option>
            <el-option label="待审批" :value="1"></el-option>
            <el-option label="待开展" :value='2'></el-option>
            <el-option label="开展中" :value="3"></el-option>
            <el-option label="已结束" :value="4"></el-option>
          </el-select>
          <el-button plain @click="searchActivityApply" style="color: #1772F6; margin-right: 10px;">搜索</el-button>
        </div>

        <div style="display: flex;flex-direction: column;margin-top:-8px">
          <el-row >
            <el-col  v-for="apply in paginatedActivies" :key="apply.id" style="width:700px;height:160px;margin-top: 25px;margin-bottom: 10px;">
              <el-card shadow="hover" :body-style="{ padding: '0px' }" style="height: 170px;width: 800px; margin-left: 90px;">
                <div style="margin-top: 17px;margin-left: 40px;height: 30px; width: 550px;">
                  <p style="font-size: 22px; font-family: Arial;  float: left; font-weight: 600;  margin: 0 0 0px; text-align: left;
                        display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1; overflow: hidden;text-overflow: ellipsis;">{{apply.title}}</p>
                </div>

                <el-tag :style="{ backgroundColor: getActivityTag(apply.activity_state,apply.result).color, color: 'white'}"
                        style="margin-left: 650px;font-size: 14px; padding: 10px 18px;margin-top: -50px">{{ getActivityTag(apply.activity_state,apply.result).label}}</el-tag>

                <div style="text-align: left; margin-top:-20px;margin-left:60px; font-family: Arial; font-size: 18px;width: 500px; height: 100px;">
                  <p style="font-size: 16px; height:20px"><strong><span style="font-size: 16px;">举办地点：</span></strong> {{apply.place}}</p>
                  <p style="font-size: 16px; height:20px"><strong><span style="font-size: 16px;">报名时间：</span></strong> {{ formatDate(apply.apply_time) }}</p>
                  <p style="font-size: 16px; height:20px"><strong><span style="font-size: 16px;">举办时间：</span></strong>  {{ formatDate(apply.start_time) }}-{{formatDate(apply.end_time)}}</p>
                </div>

                <div>
                  <el-button type="success" style="opacity: 0.75; margin-top: -90px; margin-left:650px; height:30px; width: 100px;font-size: 16px;">查看详情</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="pagination" style="margin-top: 12px;">
          <el-pagination background layout="prev, pager, next" :total="filteredActivityApplies.length"
                         :page-size="pageActivitySize" :current-page="currentPage1" @current-change="handleActivityPage">
          </el-pagination>
        </div>

      </div>
      <div v-else style="text-align: center; margin-top: 50px;">
        <p>暂无活动记录</p>
      </div>
    </el-tab-pane>
    <el-tab-pane label="申请记录" name="申请记录">
      <div v-if="paginatedApplies.length>0">
        <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
          <el-select v-model="applyKind" placeholder="请选择" style="width: 100px; margin-right: 10px;color:#93b63a">
            <el-option label="全部类型" :value="null"></el-option>
            <el-option label="入社申请" :value="0"></el-option>
            <el-option label="活动申请" :value="1"></el-option>
            <el-option label="年检申请" :value="2"></el-option>
            <el-option label="评优申请" :value="3"></el-option>
            <el-option label="创建社团申请" :value="4"></el-option>
            <el-option label="举办活动申请" :value="5"></el-option>
            <el-option label="退社申请" :value="6"></el-option>
          </el-select>
          <el-select v-model="applyState" placeholder="请选择" style="width: 100px; margin-right: 10px;">
            <el-option label="全部状态" :value="null"></el-option>
            <el-option label="待审批" :value="0"></el-option>
            <el-option label="已完成" :value="1"></el-option>
            <el-option label="待重办" :value="2"></el-option>
          </el-select>
          <el-button plain @click="searchApply" style="color: #1772F6; margin-right: 10px;">搜索</el-button>
        </div>

        <div style="display: flex;flex-direction: column;align-items: center;">
          <el-card style="width:700px;height:180px;margin-top: 10px;" v-for="apply in paginatedApplies" :key="apply.ID">
            <div style="display: flex;justify-content: flex-start;align-items: center;">
              <el-tag :style="{ backgroundColor: getTagType(apply.Kind).color, color: 'white' }" effect="plain" style="margin: 10px 0; font-size: 16px;">
                {{ getTagType(apply.Kind).label }}
              </el-tag>
              <div class="title" style="margin-left: 10px">{{ apply.Title }}</div>
            </div>
            <!--        <span style="margin: 10px 0; font-size: 16px">{{ getTypeLabel(apply.Kind) }}</span>-->
            <el-timeline class="timeline">
              <el-timeline-item
                  v-for="(step, index) in getSteps(apply)"
                  :key="index"
                  :timestamp="step.time"
                  :color="step.color"
                  :icon="step.icon"
                  class="lineitem"
              >
          <span style="display: flex; flex-direction: column">
            <span>{{ step.label }}</span>
          </span>
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </div>

        <div class="pagination">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="filteredApplies.length"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange">
          </el-pagination>
        </div>
      </div>
      <div v-else style="text-align: center; margin-top: 50px;">
        <p>暂无活动记录</p>
      </div>
    </el-tab-pane>
    <el-tab-pane label="消息通知" name="消息通知">
      <!-- 消息通知内容 -->
      <el-tabs v-model="activeSubTab" >
        <el-tab-pane label="全部消息" name="全部消息">
          <!-- 收藏的社团内容 -->
          <div>这里是全部消息</div>
        </el-tab-pane>
        <el-tab-pane label="未读消息" name="未读消息">
          <!-- 收藏的活动内容 -->
          <div>这里是未读消息</div>
        </el-tab-pane>
        <el-tab-pane label="已读消息" name="已读消息">
          <!-- 收藏的活动内容 -->
          <div>这里是已读消息</div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>

</template>


<script>

import { ElMessage } from 'element-plus'
import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {useStore} from "vuex";
import {CirclePlus} from "@element-plus/icons-vue";
// import NavigationBar from "@/components/NavigationBar.vue";


export default {
  // components: {
  //   NavigationBar, // 注册组件，以便在模板中使用
  // },
  name: 'CoverUploader',
  components: {CirclePlus},
  setup() {
    const defaultCoverUrl = require('../assets/bgp.jpg') // 默认封面图片 URL
    const coverUrl = ref(defaultCoverUrl)
    const showOverlay = ref(false)

    const isDetailVisible = ref(false);
    const isEditingHonor = ref(null);
    const isEditing=ref(false);

    // const email=ref();const campus=ref();const intro=ref();const gender=ref();
    // const phone=ref();const backEmail=ref();const honors = ref([]);
    const active1=ref(false);const active2=ref(false);const active3=ref(false);
    const active4=ref(false);const active5=ref(false);const active6=ref(false);

    const Account = computed(() => store.state.userinfo.account);
    const activeTab = ref('收藏');
    const activeSubTab = ref('收藏的社团');

    const CcurrentPage = ref(1);
    const collectedClubs = ref([]);
    const pageCollectedClubSize =ref(4);
    const Ccollected =ref([]);
    const images =ref([]);

    const AcurrentPage = ref(1);
    const collectedActivities = ref([]);
    const clubs = ref([]);
    const pageCollectedActivitySize=ref(3);
    const collected =ref([])
    const res = ref(0)
    const dialogVisible =ref(false)
    const currentActivity=ref()

    const JcurrentPage = ref(1);
    const joinedClubs = ref([]);
    const pageJoinedClubSize =ref(4);
    const Jimages =ref([]);

    const honorTitle=ref();const honorTime=ref()
    const store = useStore();

    const applyKind = ref(null);const applyState = ref(null);
    const activityState=ref(null);
    const applies = ref([]);const ActivityApplies = ref([]);
    const filteredApplies = ref([]);
    const filteredActivityApplies = ref([]);
    const currentPage = ref(1);const currentPage1 = ref(1);
    const pageSize = ref(4);const pageActivitySize= ref(4);
    const detail = reactive({
      Gender: '',
      Intro: '',
      Campus: '',
      Phone: '',
      Email: '',
      BackupEmail: '',
      Honors:[]
    });

    const rules={
      Email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ],
      // 备用邮箱验证规则
      BackupEmail : [
        { type: 'email', message: '请输入正确的备用邮箱格式', trigger: ['blur', 'change'] }
      ]
    }
    const showdetail=async () => {
      console.log("account:",store.state.userinfo.account)
      axios.get('/api/detail', {
        params: {
          account: store.state.userinfo.account
        }
      })
          .then(response => {
            console.log("获得个人信息",response.data.data);
            const { Email, Campus, Honors, Phone, Intro, BackupEmail, Gender } = response.data.data.detail;
            Object.assign(detail, { Email, Campus, Honors, Phone, Intro, BackupEmail, Gender });
            console.log("detail.value",detail.value)
            active1.value = !!Intro;active2.value = !!Campus;
            active3.value = !!Phone;active4.value = !!Email;active5.value = !!BackupEmail;
            active6.value = Array.isArray(Honors) && Honors.length > 0; // 如果Honors是数组且非空
            // email.value = Email;
            // campus.value  = Campus;
            // honors.value  = Honors;
            // phone.value  = Phone;
            // gender.value  = Gender;
            // intro.value  = Intro;
            // backEmail.value  = BackupEmail;


          })
          .catch(function (err) {
            console.log('详细信息获取失败' + err)
          })
    };
    const getCollectedActivities = async( ) =>{
      try {
        const response = await axios.get('/api/getCollectedActivities', {
          params: {
            uid: store.state.userinfo.account
          }
        });
        console.log("获得收藏的活动：",response.data.data)
        const data = response.data.data.activities;
        const collect =response.data.data.collected;
        const clubname = response.data.data.clubs;
        collectedActivities .value = data;
        clubs .value=clubname;
        collected .value =collect;
      } catch (error) {
        ElMessage.error('获取活动收藏失败');
        console.error('获取活动收藏失败', error);
      }
    };

    const getCollectedClubs = async()=>{
      try{
        const response = await axios.get('/api/getCollectedClubs', {
            params: {
              uid: store.state.userinfo.account
            }});
            console.log("获得收藏的社团：",response.data.data)
            const data = response.data.data.clubs;
            const collect =response.data.data.collected;
            const image = response.data.data.images;
            collectedClubs .value =data;
            images .value = image;
            Ccollected .value =collect;
          }catch (error) {
          ElMessage.error('获取社团收藏失败');
          console.error('获取社团收藏失败', error);
        }
    };

    const showDialog=(activity)=> {
        dialogVisible .value = true;
        currentActivity .value= activity;
        console.log("current:",currentActivity .value.ATitle)
    };

    const CurrentTitle=computed(()=>{
        return currentActivity .value.ATitle;
    });
    const formattedContent=computed(()=> {
        return currentActivity .value.Content.replace(/\r\n|\n/g, '<br>');
    });
    const formattedRequirement=computed(()=> {
        return currentActivity .value.Requirement.replace(/\r\n|\n/g, '<br>');
    });

    const handleClose=(done)=> {
        done();
    };

    const getCurrentDateTime=()=> {
        const now = new Date();

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并且保证两位数
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        return formattedDateTime;
     };

    const joinActivity=()=>{
      const formData = new FormData()
      formData.append('uid',store.state.userinfo.account )
      formData.append('aid', currentActivity .value.Aid)
      formData.append('time', getCurrentDateTime())

      axios.post('/api/joinActivity', formData)
        .then(response => {
          res .value = response.data.data.permission;

          switch (res .value) {
            case 0:
              ElMessage.success('报名成功')
              break;
            case 1:
              ElMessage.info('您已成功报名，请耐心等待结果');
              break;
            case 2:
              ElMessage.success('您已报名成功，无需再报名');
              break;
            case 3:
              ElMessage.warning('该活动仅限本社团成员参加');
              break;
            default:
            ElMessage.error('未知响应');
          }
          })
        .catch(error => {
          console.error('Error joining activity:', error);
        });
      };

    const getJoinedClubs = async( ) =>{
      try {
        const response = await axios.get('/api/getJoinedClubs', {
          params: {
            uid: store.state.userinfo.account
          }
        });
        const clubs = response.data.data.clubs;
        joinedClubs .value=clubs;
        const images = response.data.data.images;
        Jimages .value = images;
      } catch (error) {
        ElMessage.error('获取加入社团失败');
        console.error('获取加入社团失败', error);
      }
    };

    const handleTabClick =()=> {
      if (activeSubTab.value === '收藏的活动') {
        getCollectedActivities();
      }
      if (activeSubTab.value === '收藏的社团') {
        getCollectedClubs();
      }
    };

    const getFormatTime = (time) =>{
      let date = new Date(time);
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString().padStart(2, '0');
        let day = date.getDate().toString().padStart(2, '0');
        let hours = date.getHours().toString().padStart(2, '0');
        let minutes = date.getMinutes().toString().padStart(2, '0');
        let seconds = date.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    const toggleCollect=(aid,index)=> {
      const collectedStatus = collected.value[index];
      sendCollectStatus(aid,collectedStatus);
      collected.value[index] = collected.value[index] === 1 ? 0 : 1;// 切换收藏状态
    };

    const toggleClubCollect=(id,index)=> {
      console.log("个人中心社团收藏功能id：",id)
      console.log("个人中心社团收藏功能index：",index)
      const collectedStatus = Ccollected.value[index];
      sendCollectClubStatus(id,collectedStatus);
      Ccollected.value[index] = Ccollected.value[index] === 1 ? 0 : 1;// 切换收藏状态
    };

    const sendCollectClubStatus = (id,collectedStatus)=> {
      const formData = new FormData()
      formData.append('uid', store.state.userinfo.account)
      console.log("个人中心社团收藏前后端连接uid:",store.state.userinfo.account)
      console.log("个人中心社团收藏前后端连接cid:",id)
      console.log("个人中心社团收藏前后端连接sczt:",collectedStatus)
      formData.append('cid',id)
      formData.append('collected',collectedStatus)
      // 使用axios或其他HTTP客户端库发送POST请求
      axios.post('/api/club/CollectClub', formData)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.error(error);
        });
    };

    const sendCollectStatus = (aid,collectedStatus)=> {
      const formData = new FormData()
      formData.append('uid', store.state.userinfo.account)
      console.log("account:",store.state.userinfo.account)
      formData.append('aid',aid)
      formData.append('collected',collectedStatus)
      // 使用axios或其他HTTP客户端库发送POST请求
      axios.post('/api/activity/CollectActivity', formData)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.error(error);
        });
    };

    const getUnitText=(Unit)=> {
        switch (Unit) {
          case '校团委':
              return '校级';
          default:
              return '院级';
      }
    };
    const getAddressText=(address)=> {
        switch (address) {
          case 1:
              return '南校区';
          case 2:
              return '北校区';
          case 3:
              return '珠海校区';
          case 4:
              return '深圳校区';
          case 5:
              return '东校区';
          case 6:
              return '五校园'
          default:
              return '';
      }
    };

    const getStateText = (state)=> {
      switch (state) {
        case 1:
            return '待报名';
        case 2:
            return '报名中';
        case 3:
            return '待开展';
        case 4:
            return '开展中';
        case 5:
            return '已结束';
        default:
            return '其它';
      }
    };

    const getTypeText=(type)=> {
      switch (type) {
        case 1:
            return '思想政治类';
        case 2:
            return '学术科技类';
        case 3:
            return '体育竞技类';
        case 4:
            return '志愿公益类';
        case 5:
            return '文化艺术类';
        default:
            return '';
      }
    };

    const getCampusText=(campus)=> {
      switch (campus) {
        case 1:
            return '南校区';
        case 2:
            return '北校区';
        case 3:
            return '珠海校区';
        case 4:
            return '深圳校区';
        case 5:
            return '东校区';
        case 6:
            return '五校园'
        default:
            return '';
      }
    };

    const  getPermissionText=(permission)=>{
      switch (permission) {
        case 1:
            return '仅本社团成员可报名';
        default:
            return '';
      }
    };

    const  getTypeLogo = (type)=> {
      switch (type) {
        case 1:
            return require('../assets/1.jpg');
        case 2:
            return require('../assets/2.jpg');
        case 3:
            return require('../assets/3.jpg');
        case 4:
            return require('../assets/4.jpg');
        case 5:
            return require('../assets/5.jpg');
        default:
            return '';
      }
    };

    const handleCollectedActivityPage = (page) => {
      AcurrentPage.value = page;
    };

    const handleCollectedClubsPage = (page) => {
      CcurrentPage.value = page;
    };
    const handleJoinedClubsPage = (page) => {
      JcurrentPage.value = page;
    };

    const displayedClubs = computed(() => {
      if (!collectedClubs.value || collectedClubs.value.length === 0) {
        return []; // 如果 collectedClubs 为空，返回空数组
      }
      const startIndex = (CcurrentPage.value - 1) * pageCollectedClubSize.value;
      const endIndex = startIndex + pageCollectedClubSize.value;
      return collectedClubs.value.slice(startIndex, endIndex);
    });

    const displayedActivities = computed(() => {
      if (!collectedActivities.value || collectedActivities.value.length === 0) {
        return [];
      }
        const start = (AcurrentPage.value - 1) * pageCollectedActivitySize.value;
        const end = start + pageCollectedActivitySize.value;
        return collectedActivities.value.slice(start, end);
    });

    const displayedJoinedClubs = computed(() => {
      if (!joinedClubs.value || joinedClubs.value.length === 0) {
        return [];
      }
      const start = (JcurrentPage.value - 1) * pageJoinedClubSize.value;
      const end = start + pageJoinedClubSize.value;
      return joinedClubs.value.slice(start, end);
    });

    const searchActivityApply = async () => {
      console.log("account:",store.state.userinfo.account)
      try {
        const response = await axios.get('/api/getActivityApplies', {
          params: {
            account: store.state.userinfo.account
          }
        });
        const data = response.data.data.apply;
        ActivityApplies .value = data;

        filteredActivityApplies.value = ActivityApplies.value.filter(apply => {
          if (activityState.value === null) return true;
          else if(activityState.value==1) return apply.result === 0;
          else return apply.result === 1 &&apply.activity_state-1 === activityState.value;
        });
      } catch (error) {
        ElMessage.error('获取活动记录失败');
        console.error('获取活动记录失败:', error);
      }
    };
    const paginatedActivies = computed(() => {
      if (!filteredActivityApplies.value || filteredActivityApplies.value.length === 0) {
        return [];
      }
      const start = (currentPage1.value - 1) * pageActivitySize.value;
      const end = start + pageActivitySize.value;
      return filteredActivityApplies.value.slice(start, end);
    });

    const handleActivityPage = (page) => {
      currentPage1.value = page;
    };

    const getActivityTag=(state,result)=>{
      const types = [
        {label: '待审批', color: 'rgba(238,59,70,0.62)' },
        {label: '待开展', color: 'rgb(147,182,58)' },
        {label: '开展中', color: 'rgb(217,174,65)' },
        {label: '已结束', color: 'rgba(148,141,141,0.5)' }

      ]
      if(result==0) return types[0];
      else return types[state-2];
    }

    const searchApply = async () => {
      console.log("account:",store.state.userinfo.account)
      try {
        const response = await axios.get('/api/getApplies', {
          params: {
            account: store.state.userinfo.account
          }
        });
        const data = response.data.data.apply;
        console.log("apply:", data);
        applies.value = data;

        filteredApplies.value = applies.value.filter(apply => {
          const kindMatch = applyKind.value === null || apply.Kind === applyKind.value;
          const Approval_StateMatch = applyState.value === null || getApplyState(apply.Kind, apply.Approval_State) === applyState.value;
          return kindMatch && Approval_StateMatch;
        }).sort((a, b) => new Date(b.ApplyTime) - new Date(a.ApplyTime));
      } catch (error) {
        ElMessage.error('获取申请记录失败');
        console.log('获取申请记录失败: ' + error);
      }
    };

    const paginatedApplies = computed(() => {
      if (!filteredApplies.value || filteredApplies.value.length === 0) {
        return [];
      }
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredApplies.value.slice(start, end);
    });
    const handlePageChange = (page) => {
      currentPage.value = page;
    };
    const getTagType= (kind) => {
      const types = [
        { label: '入社申请', color: 'rgba(224,111,174,0.62)' },
        { label: '活动申请', color: '#93b63a' },
        { label: '年检申请', color: 'rgba(238,5,5,0.62)' },
        { label: '评优申请', color: '#d9ae41' },
        { label: '创建社团申请', color: 'rgba(90,19,124,0.62)' },
        { label: '举办活动申请', color: '#3ab6a8' },
        { label: '退社申请', color: 'rgba(56,77,57,0.62)' }
      ];
      return types[kind];
    }
    const getApplyState = (kind, Approval_State) => {
      if (kind === 0 || kind === 1 || kind === 6) {//入社、入活、退社
        if (Approval_State === 0) return 0; // 待审批
        if (Approval_State === 1) return 1; // 已通过
        if (Approval_State === 2) return 2; // 不通过
      } else {
        if ([0, 3].includes(Approval_State)) return 0; // 待审批
        if (Approval_State === 5) return 1; // 已完成
        return 2; // 待重办
      }
    };
    const getColor = (stepIndex, kind, state) => {
      if (kind === 0 || kind === 1 || kind === 6) {
        return state === 2 ? 'red' : 'green'; // 社团负责人审批
      } else {
        switch (stepIndex) {
          case 1: // 行政指导教师审批
            return state === 4 ? 'red' : 'green';
          case 2: // 校团委审批
            return state === 6 ? 'red' : 'green';
        }
      }
    };
    const getSteps = (apply) => {
      const steps = [];
      // 用户提交
      steps.push({ label: '用户提交', time: formatDate(apply.ApplyTime), color: 'green' });

      if (apply.Kind === 0 || apply.Kind === 1 || apply.Kind === 6) {
        // 只考虑社团负责人审批
        if (apply.ApprovalDate1 !== null) {
          steps.push({
            label: apply.Approver1_Name,
            time: formatDate(apply.ApprovalDate1),
            color: getColor(1, apply.Kind, apply.Approval_State)
          });
        } else {
          steps.push({
            label: apply.Approver1_Name,
            time: '',
            color: 'gray'
          });
        }
      } else {
        // 行政指导教师审批
        if (apply.ApprovalDate2 !== null) {
          steps.push({
            label: apply.Approver2_Name,
            time: formatDate(apply.ApprovalDate2),
            color: getColor(1, apply.Kind, apply.Approval_State)
          });
        } else {
          steps.push({
            label: apply.Approver2_Name,
            time: '',
            color: 'gray'
          });
        }

        // 校团委审批
        if (apply.ApprovalDate3 !== null) {
          const step = {
            label: apply.Approver3_Name,
            time: formatDate(apply.ApprovalDate3),
            color: getColor(2, apply.Kind, apply.Approval_State),
            icon: ''
          };
          if (apply.Approval_State === 5) {
            step.icon = 'Select'; // 添加图标
          }
          steps.push(step);
        } else {
          steps.push({
            label: apply.Approver3_Name,
            time: '',
            color: 'gray'
          });
        }
      }
      return steps;
    };

    onMounted(() => {
      searchActivityApply();
      searchApply(); // 初始化时显示所有申请记录
      showdetail();
      getCollectedActivities();
      getCollectedClubs();
      getJoinedClubs();
    });

    const formatDate = (isoString) => {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要加1
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
    const addHonor = () => {
      isEditingHonor.value=true;
    };

    const saveProfile = () => {
      const formData = new FormData()
      formData.append("account",store.state.userinfo.account)
      formData.append("gender",detail.Gender)
      formData.append("intro",detail.Intro)
      formData.append("campus",detail.Campus)
      formData.append("phone",detail.Phone)
      formData.append("email",detail.Email)
      formData.append("backEmail",detail.BackupEmail)
      for (let pair of formData.entries()) {
        console.log(pair[0] + ': ' + pair[1]);
      }
      axios.post('/api/saveProfile', formData)
          .then(response => {
            isEditing.value=!isEditing.value;
            console.log("保存简介formdatasssssss:",formData)
            console.log("Profile saved successfully", response);
            active1.value = !!detail.Intro;active2.value = !!detail.Campus;
            active3.value = !!detail.Phone;active4.value = !!detail.Email;active5.value = !!detail.BackupEmail;
          })
          .catch(error => {
            console.error("Error saving profile保存用户信息失败:", error);
          });
    };
    const saveHonor = () => {
      if (isEditingHonor.value !== null) {
        const formData = new FormData();
        formData.append("account",store.state.userinfo.account);
        formData.append("title", honorTitle.value);
        formData.append("startTime", honorTime.value);
        axios.post('/api/savehonor', formData)
            .then(response => {
              console.log("hid",response.data.data.honorID)
              detail.Honors.push({
                HonorID: response.data.data.honorID, // 假设服务器返回荣誉 ID
                Title: honorTitle.value,
                StartTime: honorTime.value,

              });
              honorTitle.value='';
              honorTime.value = '';
              isEditingHonor.value = null;
              active6.value=true;
            })
            .catch(function (err) {
              console.log('保存荣誉经历失败' + err)
            });
      }
    };
    const cancelEditHonor = () => {
      isEditingHonor.value = null;
    };
    const deleteHonor = (honorID,index) => {
      console.log("acc:",store.state.userinfo.account)
      console.log("hid:",honorID)
      axios.delete('/api/deletehonor', {
        params:{
          account:store.state.userinfo.account,
          honorID:honorID
        }
      })
          .then(()=>{
            detail.Honors.splice(index, 1), // 从 honors 数组中删除对应的荣誉记录
                isEditingHonor.value = null
          })
          .catch(function (err) {
            console.log('详细信息获取失败' + err)})
    };
    const handleEditProfile=()=>{
      isEditing.value=!isEditing.value;
    }
    const toggleDetail = () => {
      isDetailVisible.value = !isDetailVisible.value;
      console.log("iddednjec:"+isDetailVisible.value);
    };

    // 计算卡片的最小高度
    const cardMaxHeight = computed(() => {
      if (isEditing.value) {
        return '1200px';
      } else {
        const detailHeight = isDetailVisible.value ? 200 : 0; // 假设详细信息部分高度为200px
        return `calc(450px + ${detailHeight}px)`;
      }
    });
    const disabledFutureDates = (date) => {
      return date.getTime() > Date.now();
    };
    // 处理封面图片上传
    const handleCoverUpload = (file) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        coverUrl.value = e.target.result
        ElMessage.success('封面已上传')
      }
      reader.readAsDataURL(file.raw)
      return false // 阻止文件自动上传
    }
    // 移除封面图片
    const removeCover = () => {
      coverUrl.value = defaultCoverUrl
      ElMessage.success('封面已移除')
    }
    const handleUploadClick = () => {
      this.$refs.fileInput.click();
    }
    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        // Handle the file upload logic here
        console.log('Uploading file:', file);
      }
    }

    return {
      rules,
      getCollectedClubs,
      displayedClubs,
      CcurrentPage,
      Ccollected,
      collectedClubs,
      images,
      toggleClubCollect,
      handleCollectedClubsPage,
      sendCollectClubStatus,
      pageCollectedClubSize,
      collected,
      AcurrentPage,
      res,
      dialogVisible,
      CurrentTitle,
      formattedContent,
      formattedRequirement,
      currentActivity,
      showDialog,
      handleClose,
      getCurrentDateTime,
      joinActivity,
      collectedActivities,
      displayedActivities,
      clubs,
      pageCollectedActivitySize,
      handleTabClick,
      handleCollectedActivityPage,
      getCollectedActivities,
      getFormatTime,
      toggleCollect,
      sendCollectStatus,
      getStateText,
      getTypeText,
      getAddressText,
      getUnitText,
      getCampusText,
      getPermissionText,
      getTypeLogo,
      disabledFutureDates,
      showdetail,
      detail,
      handleActivityPage,
      paginatedActivies,
      pageActivitySize,
      getActivityTag,
      JcurrentPage,
      joinedClubs,
      pageJoinedClubSize,
      Jimages,
      handleJoinedClubsPage,
      ActivityApplies,
      getJoinedClubs,
      displayedJoinedClubs,
      filteredActivityApplies,
      searchActivityApply,
      activityState,
      getTagType,
      getSteps,
      applyKind,
      applyState,
      filteredApplies,
      paginatedApplies,
      currentPage,
      currentPage1,
      pageSize,
      searchApply,
      getApplyState,
      getColor,
      handlePageChange,
      formatDate,
      honorTitle,honorTime,
      isEditingHonor,
      addHonor,
      // editHonor,
      saveHonor,
      cancelEditHonor,
      deleteHonor,
      // campus, email, honors, gender, phone, intro, backEmail,
      active1, active2,active3, active4, active5, active6,
      Account,
      isEditing,
      handleEditProfile,
      coverUrl,
      defaultCoverUrl,
      handleCoverUpload,
      removeCover,
      avatarUrl: '../assets/avatar.jpg',
      showOverlay,
      handleUploadClick,
      handleFileChange,
      userName: '张三',
      studentId: '123456789',
      isDetailVisible,
      toggleDetail,
      cardMaxHeight,
      activeTab,
      activeSubTab,
      saveProfile,
    }
  }
}

</script>

<style scoped>
.profile-card {
  width: 1000px;
  max-height: 1800px;
  margin: 0 auto;
  //margin-top: 10px;
  position: relative;
  //min-height: calc(100vh - 200px);
  transition: min-height 0.5s ease; /* 添加过渡效果 */
  overflow: hidden; /* 防止内容溢出 */
}
.cover-container {
  height: 280px; /* 固定区域高度 */
  width: 100%; /* 固定区域宽度 */
  position: relative;
}
.user-cover {
  width: 100%; /* 固定宽度 */
  height: 100%; /* 固定高度 */
  object-fit: cover; /* 保持图像比例 */
  transition: none; /* 取消过渡效果 */
}
.upload_btn {
  position: absolute;
  top: 40px;
  right: 50px;
  background-color: transparent;
  border-color: white;
}

.avatar-container {
  position: absolute;
  top: 260px;
  left: 70px;
  width: 100px;
  height: 100px;
  border: 5px solid white;
}
.user-avatar {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
/* border: 5px solid white; */
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(68, 64, 64, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.overlay .el-icon {
  font-size: 24px;
  margin-bottom: 10px;
}
.detail_btn {
  display: flex;
  align-items: center;
  &:hover,
  &:focus,
  &:active {
    background-color: transparent !important;
  }
}
.edit_btn {
  position: absolute;
  bottom: 20px;
  right: 10px;
  border-color: #1772f6;
  color: #1772f6;
}
.profile-info {
  position: absolute;
  top: 305px;
  left: 170px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #333;
}
.profile-edit{
  position: absolute;
  top: 305px;
  left: 190px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #333;
}
.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.label {
  font-weight: bold;
  width: 100px;
  color: #666;
}
h3 {
  font-size: 18px;
  color: #444;
  margin-bottom: 10px;
}
a {
  color: #1e90ff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.func_tabs{
  width: 1000px;
  height:925px;
  margin: 0 auto;
  margin-top: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.timeline {
  display: flex;
  width: 95%;
  margin: 40px auto;
}

.lineitem {
  transform: translateX(50%);
  width: 25%;
}

::v-deep .el-timeline-item__tail {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}

::v-deep .el-timeline-item__timestamp {
  font-size: 14px;
}

.active {
  ::v-deep .el-timeline-item__node {
    background-color: #409EFF;
  }

  ::v-deep .el-timeline-item__tail {
    border-color: #409EFF;
  }
}

/* 有active样式的下一个li */
.active + li {
  ::v-deep .el-timeline-item__node {
    background-color: #409EFF;
  }
}

.clubInfo {
    margin: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5a58581a;
    z-index: 999;
  }

  .el-dialog {
    box-shadow: none !important;
  }
</style>
